<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1');
        </script>
        <script src="correlation.js" type="text/javascript"></script>
        <script type="text/javascript">
            function loadTable() {
                var queryText = encodeURIComponent("SELECT Country, Health, Final FROM 105221");
                var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
                query.send(getData);
            }
            function getData(response) {             
                var menuX = constructMenu(response, 'X');
                var menuY = constructMenu(response, 'Y');
                document.getElementById('menuX').innerHTML = menuX
                document.getElementById('menuY').innerHTML = menuY
            }
            function constructMenu(response, id) {
                var menuText = '<select id ="' + id + '" onchange = "computeCorrelation(response)">'
                for (var row = 0; row < response.getDataTable().getNumberOfRows(); row++) {
                    menuText += '<option value = "' + row + '">' + response.getDataTable().getColumnLabel(row) + '</option>';
                }
                menuText += '</select>';
            }
            function computeCorrelation(response) {
                var colX = document.getElementById('X').value;
                var colY = document.getElementById('Y').value;
                var correlation = Correlate(response.getDataTable(), colX, colY);
                var text = "<p>Correlation = " + correlation + "</p>";
                document.getElementById('ftdata').innerHTML = text;
            }
        </script>
    </head>
    <body onload="loadTable()">
        <table>
            <tr>
                <td id ="menuX">Menu X should be here.</td>
                <td id ="menuY">Menu Y should be here.</td>
            </tr>
        </table>
        <div id="ftdata">No data.</div>
    </body>
</html>
